Amiga Mag HDD Backup/Amiga Mag HDD Backup.zip/Amiga Mag HDD Backup/Alexander.img.bin/Alexander.img/315 2 files Archive.sit/All Resource files 1/5Day-Template.tiff

Text File | 1994-08-21 | 8KB | 137 lines

Create An Animated Five-Day Weather Forecast With DeluxePaint IV


    Some time ago, I worked with our local NBC affiliate to
create weather graphics for its local newscast. They had an
Amiga 2000 and were using DeluxePaint for graphics production.
The main weather maps were downloaded from the AccuWeather
service; my job was to create specialized graphics. I created a
five-day forecast, a severe weather map, and several other custom
graphic screens. One of the things I worked on was an animated
five-day forecast. It was created entirely in DeluxePaint. In
this article, I will show you how to create this animated
forecast. In a future article, I will show you how to use HELM
to ease the process of building a five-day animated forecast on a
daily basis.

The Screen Layout
    Typically, a five-day forecast consists of a title at the
top of the screen, five graphic elements for each of the five
days, the names of the days, and a high and low temperature for
each day. I will follow this same convention. The major
difference is that instead of static graphics or color-cycled
graphics as is typical, I will be using animated graphics
complete with blinking sun, moving clouds, flashing lightning,
and falling rain.
    To start things off, a screen resolution and size needs to
be selected. Since the output will ultimately be used in a
television broadcast, the screen needs to be interlaced and
overscan. The resolution of TV is not that great (compared to
computer output, this is); therefore, a 16-color low resolution
screen should be sufficient. The lower resolution will also
ensure that the animated screen will run smoothly with no
jerkiness. A maximum overscan of 368x482 will be used to make
sure there is no border around the screen.
    Now the palette needs to be set. I used a blue background.
There is a yellow for text and lightning, some greens for the
grass, some blues for the sky, and so on. Figure 1 shows the
palette I selected.

The Building Blocks
    Once the selected screen resolution and palette are set,
the graphic elements to be used in the animated forecast need to
be created. There are many different types of days that can
occur: sunny, partly cloudy, rainy, stormy, snowy, haily, floody,
etc. For this article, I will discuss the first five.
    First, a basic screen design needs to be produced. Figure 2
shows the template I created. From the top down, it has the
title, a blank area for inserting the text indicating the days,
five boxes for inserting the AnimBrushes that will be created,
and color rectangles for inserting the high and low temperature
for each day. It is rather plain, but it gets the job done. You
can be as artistic as you like putting this template together.
    Now it is time to build the static graphic elements that
will be used to produce the forecast. Figures 3 and 4 show the
ones I created. The top row of Figure 3 shows the core graphics
that will be used in each AnimBrush. Each has a dithered green
ground and a solid blue sky. The graphic on the left has a light
blue sky and will be used for sunny days. The middle graphic has
a medium blue sky that will be used for partly cloudy days. The
graphic on the right has a dark blue sky that will be used for
overcast days. Each of these graphics is sized to fit inside the
hollow rectangular boxes in Figure 2. The graphics themselves
are each 50x183 pixels in size. The middle row of Figure 3 shows
five singular elements (cloud, lightning bolt, sun, raindrop, and
snowflake). The bottom row shows groupings of four of the
elements. These groupings will be used to create the
AnimBrushes. The three graphics at the top, the sun, and the four
element groupings at the bottom of the figure should each be
saved as separate brushes.
    Figure 4 shows seven different brushes, each containing the
names of five days of the week. Each brush starts with a
different day. These brushes were designed to fit inside the
blank area above the five empty boxes in Figure 1. Thus, for any
given day, the days of the week can be added by simply loading
the appropriate brush and pasting it in the appropriate location
on the template.

A Sunny Day
    Now it is time to create the first AnimBrush. Clear the
screen in DeluxePaint, load the brush containing the graphic with
the light blue sky, and then choose Color/Palette/Use Brush
Palette from the menu. This will set the screen palette to that
of the brush. Now paste the brush in the middle of the screen.
After some experimentation, I decided that a 10-frame animation
running at 10 frames per second looked quite good. So, from the
menu choose Anim/Frames/Set #, enter 10, and select OK. Also,
from the menu, choose Anim/Control/Set Rate and enter 10. This
will set the frame rate. At this point you will have a 10-frame
animation with each frame containing the pasted brush in the
middle of the screen.
    Load the sun brush and paste it down on the first frame in
the blank blue area away from the ground and sky graphic. Notice
that the sun is not symmetric. By rotating the brush 90 degrees,
a slightly different looking sun can be created for the next
frame of the animation. Choose the menu item Brush/Rotate/90
degrees. This will create a short wide sun due to the odd aspect
ratio of a 368x482 screen. To resize this alternate image of the
sun to better match the original image, choose the menu item
Brush/Size/Halve once and Brush/Size/Double Vert twice. Position
the resized brush over top of the original sun in frame one,
press the 2 key to jump to the second frame, and paste the
altered sun brush to the screen. By alternately pressing the 1
(previous frame) and the 2 (next frame) keys, you can see how
good the "blinking" sun looks. Redo these steps if necessary.
    Now it is time to add the sun to the light blue sky. Go to
frame one. Choose Anim/AnimBrush/Pick Up from the menu. Draw a
box around the sun, and when asked how many cels, type in 2. This
creates a two-frame AnimBrush of the sun. The frames are
slightly different from each other so it gives a slight motion to
the sun. To see how the blinking sun looks, hold down the 7 key.
This will cycle the AnimBrush frames. Save the AnimBrush by
selecting the Anim/AnimBrush/Save menu item. After saving,
position the sun AnimBrush in the light blue sky of the graphic
in the center of the screen on frame one. Paste the AnimBrush.
Press the M key (must be capital) to bring up the Move requester.
Make sure all of the settings are as shown in Figure 5 and press
the Draw button. This will cause the two-frame AnimBrush to be
pasted on each frame of the animation, alternating the two sun
images for consecutive frames. The result is a ten-frame
animation of a blinking sun in the light blue sky. To see how
the animation looks, press the 4 key. Pressing the Esc key will
stop the animation.
    Make sure frame one is displayed and select the
Anim/AnimBrush/Pick Up menu item. Draw a box around the ground
and sky graphic and type in 10 when asked how many cels. Click
on OK. A 10-frame AnimBrush containing the entire ground and sky
graphic with a blinking sun will be created. It should be saved
for later use.

A Partly Cloudy Day
    A partly cloudy day consists of a sun with some clouds.
Since the blinking sun AnimBrush has just been created, it can be
used as the base for this graphic. However, the sky needs to be
a medium blue. Therefore, there are two approaches that can be
used. First, the sky in all ten frames of the sunny day
animation can be filled with the medium blue color. Second, the
ground and medium blue sky graphic